<template>
	<view class="bindPhone">
		<!-- 绑定手机号 -->
		<view class="forge_content">
			<view class="forge_content_one">
				<view class="forge_content_one_left">
					<image src="../../static/sj.png" mode="aspectFill"></image>
					<input type="text" value="" v-model="phone" placeholder="请输入手机号" placeholder-style="color:#999999" />
				</view>
				<view class="forge_content_one_right">

				</view>
			</view>
			<view class="forge_content_one">
				<view class="forge_content_one_left">
					<image src="../../static/yz.png" mode="aspectFill"></image>
					<input type="text" value="" v-model="code" placeholder="请输入验证码" placeholder-style="color:#999999" />
				</view>
				<view class="forge_content_one_right">
					<view class="right_one" v-if="showText" @click="getCode">
						获取验证码
					</view>
					<view class="right_one" v-if="!showText">
						{{ second }}秒后
					</view>
				</view>
			</view>
			<view class="forge_content_one">
				<view class="forge_content_one_left">
					<image src="../../static/login_password.png" mode="aspectFill"></image>
					<input type="text" value="" v-model="pwd" placeholder="请设置新密码" placeholder-style="color:#999999" />
				</view>
				<view class="forge_content_one_right">

				</view>
			</view>
			<view class="forge_content_one">
				<view class="forge_content_one_left">
					<image src="../../static/login_password.png" mode="aspectFill"></image>
					<input type="text" value="" v-model="old" placeholder="请再次确认新密码" placeholder-style="color:#999999" />
				</view>
				<view class="forge_content_one_right">

				</view>
			</view>
		</view>
		<!-- 确定 -->
		<view class="forget_confirm" @click="bindPhone">
			确定
		</view>
	</view>
</template>

<script>
	import {
		bandPhone,
		sendSms
	} from "@/common/config/request.js"
	export default {
		data(){
			return {
				phone:"",
				pwd:"",
				old:"",
				code:"",
				showText:true,
				second: 60, //默认60秒
			}
		},
		methods:{
			getCode() {
				this.yzphone().then((r) => {
					if (r == true) {
						sendSms({
							phone: this.phone
						}).then((res) => {
							console.log(res)
							if (res.data.code == 1) {
								this.djs()
							}
						})
					}
				})
			},
			djs() {
				var that = this;
				var interval = setInterval(() => {
					that.showText = false;
					var times = that.second - 1;
					//that.second = times<10?'0'+times:times ;//小于10秒补 0
					that.second = times;
					console.log(times);
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					that.second = 60;
					that.showText = true;
				}, 60000);
			},
			yzphone() {
				console.log(this.phone)
				return new Promise((r, n) => {
					if (!this.phone) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						return;
					}
					if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
						uni.showToast({
							title: '请输入正确手机号',
							icon: 'none'
						});
						return;
					}
					r(true)
				})
			},
			bindPhone(){
				let data={
					phone:this.phone,
					pwd:this.pwd,
					code:this.code,
				}
				if(this.pwd==this.old){
					// console.log(data)
					bandPhone(data).then(res=>{
						if(res.data.code==1){
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'两次输入密码不一致'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bindPhone {
		width: 750rpx;

		.forge_content {
			width: 750rpx;
			box-sizing: border-box;
			padding: 10rpx 20rpx;

			.forge_content_one {
				width: 710rpx;
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #DEDEDE;

				.forge_content_one_left {
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 24rpx;
						margin-left: 12rpx;
					}

					input {
						width: 272rpx;
						height: 48rpx;
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 48rpx;
						color: #333333;
					}
				}

				.forge_content_one_right {
					.right_one {
						width: 200rpx;
						height: 48rpx;
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 48rpx;
						color: #FA9700;
						border-left: 1rpx solid #FA9700;
						box-sizing: border-box;
						padding-left: 18rpx;
						margin-right: 12rpx;
					}
				}
			}
		}

		.forget_confirm {
			width: 702rpx;
			height: 98rpx;
			background-color: #FA9700;
			border-radius: 48rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 98rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 93rpx auto 0;
		}
	}
</style>
